<template>
<div class="border-image">
   <h5>1.边框图片的使用场景</h5>
   <p>盒子大小不一，但是边框样式相同，此时就要使用边框图片（给边框加背景图片）</p>
   <h5>2.边框图片切图原理（重要）</h5>
   <p>把四个角切出去，中间部分可以铺排、拉伸或者环绕</p>
   <img src="./img/slice.png" alt="">
   <h5>2.边框图片语法（重要）</h5>
   <ul>
    <li>border-image-source: 用在边框的图片的路径</li>
    <li>border-image-slice: 图片边框向内偏移(裁剪的尺寸，一定不加单位，上右下左顺序)</li>
    <li>border-image-width: 图片边框的宽度(需要加单位，不是边框的宽度是边框图片的宽度) 不会挤压文字</li>
    <li>border-image-repeat: 图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch) 默认拉伸</li>   
    <div style="display: flex;margin-top: 20px;">
        <div class="box">123</div>
        <div class="panel">
            <div class="inner">456</div>
        </div>
    </div>
</ul>
</div>
</template>
<script setup lang="ts">
import { useStore } from 'vuex'
const store = useStore()
store.commit('setComponentPath','src/views/Native/PureCSS/pages/BorderImage/BorderImage.vue')
</script>
<style lang="scss" scoped>
 .border-image {
    .box {
        width: 300px;
        height: 150px;
        border: 10px solid pink;
        border-image-source: url(img/border.jpg);
        border-image-slice: 167;
        border-image-width: 20px;
        border-image-repeat: stretch;
    }
    .panel {
      position: relative;
      margin-left: 20px;
      width: 300px;
      height: 100px;
      border: 15px solid transparent;
    //   border-width: 51px 38px 20px 132px;
      border-width: 51px 38px 20px 132px;  
      border-image-source: url(img/border.png);
      border-image-slice: 51 38 20 132;
      .inner {
        position: absolute;
        top: -51px;
        right: -38px;
        bottom: -20px;
        left: -132px;
        padding: 24px 36px;
      }
    }
 }
</style>